<!DOCTYPE html>
<html>

<head lang="en">
    <meta charset="UTF-8">
    <title>完善当当购物车页面</title>
    <link type="text/css" rel="stylesheet" href="css/cartStyle.css" />
    <script>
        function minus(num) {
            let jg = document.getElementsByName("price")[num].value;
            console.log(jg);
            // 获取数量
            let sl = parseInt(document.getElementsByName("amount")[num].value) - 1;

            if (sl < 0) {
                alert("不能在减了，不然就倒贴了！")

            } else {
                let sum = parseFloat(jg * sl)
                console.log(sl);
                // 改变文本框中的数量
                document.getElementsByName("amount")[num].value = sl;

                // 计算总价是多少
                document.getElementById("price" + num).innerHTML = "￥" + sum;
            }
            total()


        }

        function plus(num){
            let jg = document.getElementsByName("price")[num].value;
            console.log(jg);
            // 获取数量
            let sl = parseInt(document.getElementsByName("amount")[num].value) + 1;

            if (sl > 99999) {
                alert("没有库存！")

            } else {
                let sum = parseFloat(jg * sl)
                console.log(sl);
                // 改变文本框中的数量
                document.getElementsByName("amount")[num].value = sl;

                // 计算总价是多少
                document.getElementById("price" + num).innerHTML = "￥" + sum;
            }
            total()
        }

        function total(){
            let jg = document.getElementsByName("price");
            // 获取数量
            let sl = document.getElementsByName("amount");
            let sum = 0;
            for(let i=0;i<jg.length;i++){
                sum+=jg[i].value*sl[i].value;
            }
            document.getElementById("totalPrice").innerHTML="￥"+sum;
        }
        // window.onload=total()
    </script>
</head>

<body>

    <div class="content">
        <div class="logo">
            <img src="images/logo.jpg"><span onclick="close_plan();">关闭</span>
        </div>
        <div class="cartList">
            <ul>
                <li>
                    <p onclick="collection();">移入收藏</p>
                    <p onclick="del();">删除</p>
                </li>
                <li id="price0">¥159.00</li>
                <li><input type="button" name="minus" value="-" onclick="minus(0);"><input type="text" name="amount"
                        value="1"><input type="button" name="plus" value="+" onclick="plus(0);"></li>
                <li>¥<input type="text" name="price" value="159.00"></li>

            </ul>
            <ul>
                <li>
                    <p onclick="collection();">移入收藏</p>
                    <p onclick="del();">删除</p>
                </li>
                <li id="price1">¥159.00</li>
                <li><input type="button" name="minus" value="-" onclick="minus(1);"><input type="text" name="amount"
                        value="1"><input type="button" name="plus" value="+" onclick="plus(1);"></li>
                <li>¥<input type="text" name="price" value="159.00"></li>


            </ul>
            <ol>
                <li id="totalPrice">&nbsp;</li>
                <li><span onclick="accounts();">结 算</span></li>
            </ol>
        </div>
    </div>
</body>

</html>